<template>
 <div>
<ul>
    <li v-for="item,index in types" :key="index" @click="change(index)" >
{{ item }}
    </li>
</ul>
 </div>
</template>

<script>
export default {
 props: {

 },
 data() {
 return {
  types: ['全部', '互联网', '国内', '体育', '军事'],
  activeIndex:'全部'
 };
 },
 computed: {

 },
 created() {

 },
 mounted() {

 },
 watch: {

 },
 methods: {
    change(val){
        this.activeIndex = val
    }
 },
 components: {

 },
};
</script>

<style scoped lang="scss">
ul{
    width: 600px;
    height: 100px;
    display: flex;
    line-height: 50px;

    li{
        letter-spacing: 5px;
        text-align: center;
flex: 1;
margin: 20px;
border: 2px solid plum;
list-style: none;
    }
}
.active{
    background-color: pink;
}

</style>
